<template>
  <div class="login">
  <el-card class="box-card">
   <div slot="header" class="clearfix">
    <span>后台管理系统</span>
    </div>
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input type="password" v-model.trim="form.password"></el-input>
        </el-form-item>
        <el-form-item>
         <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { nameRules,passRules } from '@/utils/vaildate'
import { getLogin } from  '@/service/api/login'
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'login',
    data(){
      return{
        form:{
          username:'',
          password:''
        },
        rules:{
          username:[{validator:nameRules,trigger:'blur'}],
          password:[{validator:passRules,trigger:'blur'}]
        }
      }
    },
    methods:{
      login(from){
        this.$refs[from].validate(async(valid)=>{
          if(valid){ 
               console.log(this.form)
               const {data:res} = await getLogin(this.form)
             if(res.status === 200){
               localStorage.setItem('token',res.token)
               localStorage.setItem('username',this.form.username)
               this.$message({message:res.message,type:'success'})
               this.$router.push('/home')
             }
          }else{
            console.error(this.form)
          }
        })
      }
    },
   
  }
</script>
<style lang="scss" scoped>
.login{
  width: 100%;
  height: 100%;
  position: absolute;
  background:url(@/assets/马尾2.jpg) center no-repeat;
  background-size: 100% 100%;
  .el-card {
    background: #65768557;
  }
  .box-card{
    width: 450px;
    margin: 200px auto;
    color: azure;
    /deep/ .el-form-item__label {
      color: azure;
    }
    .clearfix  {
      font-size: 34px;
      text-align: center;
    
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>